<template>
  <div class="app-container">
    <div>
      <el-select v-model="viewModel.CategoryId" filterable size="small" placeholder="请选择">
        <el-option
          v-for="item in queryCategoryList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-select v-model="viewModel.TypeCode" filterable size="small" placeholder="请选择">
        <el-option
          v-for="item in queryTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-input
        v-model="viewModel.MainName"
        size="small"
        placeholder="共用题干"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="query"
      />
      <el-input
        v-model="viewModel.Name"
        size="small"
        placeholder="题干"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="query"
      />
      <el-button type="primary" size="small" @click="query" icon="el-icon-search">查询</el-button>
      <el-button type="primary" size="small" @click="handleAdd" icon="el-icon-plus">新增</el-button>
      <el-button type="primary" size="small" @click="refresh" icon="el-icon-refresh">刷新</el-button>
      <el-button type="primary" size="small" @click="handleUpload" icon="el-icon-upload">导入</el-button>
    </div>
    <el-table
      :data="modelList"
      v-loading="loading"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      style="width: 100%;margin-top:30px;"
      border
      height="600"
    >
      <el-table-column label="共用题干" prop="MainName" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.MainName }}</template>
      </el-table-column>
      <el-table-column label="题干" prop="Name" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.Name }}</template>
      </el-table-column>
      <el-table-column label="分类名称" prop="CategoryName" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.CategoryName }}</template>
      </el-table-column>
      <el-table-column label="基础分类" prop="TypeName" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.TypeName }}</template>
      </el-table-column>
      <el-table-column label="题目类型" prop="QuestionTypeName" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.QuestionTypeName }}</template>
      </el-table-column>
      <el-table-column label="题目解析" prop="Analysis" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.Analysis }}</template>
      </el-table-column>
      <el-table-column label="题目难度" prop="DifficultyStr" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.DifficultyStr }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope)" icon="el-icon-edit">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件：https://element.eleme.cn/#/zh-CN/component/pagination -->
    <div class="block" style="float:right;margin-top:15px;" v-if="total>0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="viewModel.PageIndex"
        :page-sizes="[10, 20, 30, 40,100]"
        :page-size="viewModel.pageSize"
        @prev-click="lastPage"
        @next-click="nextPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'编辑':'新增'"
      width="60%"
      top="2vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="height:620px;overflow-y:auto;" v-loading="editLoading">
        <el-form
          :model="model"
          ref="model"
          :rules="rules"
          label-width="100px"
          label-position="right"
          style="width: 90%;"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="分类" prop="CategoryId">
                <el-select
                  v-model="model.CategoryId"
                  style="width:100%"
                  filterable
                  placeholder="请选择分类"
                >
                  <el-option
                    v-for="item in categoryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班级类型" prop="TypeCode">
                <el-select v-model="model.TypeCode" style="width:100%" placeholder="请选择班级类型">
                  <el-option
                    v-for="item in typeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="题目类型" prop="QuestionTypeCode">
                <el-select
                  v-model="model.QuestionTypeCode"
                  style="width:100%"
                  filterable
                  placeholder="请选择题目类型"
                >
                  <el-option
                    v-for="item in QuestionTypeList"
                    :key="item.TypeCode"
                    :label="item.TypeName"
                    :value="item.TypeCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="题目难度" prop="Difficulty">
                <el-select v-model="model.Difficulty" style="width:100%" placeholder="请选择题目难度">
                  <el-option
                    v-for="item in DifficultyList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 单选、多选、判断、填空题 -->
          <div v-if="model.QuestionTypeCode<'5'">
            <el-row>
              <el-col :span="24">
                <el-form-item label="题目" prop="Name">
                  <quill-editor
                    v-model="model.Name"
                    ref="myQuillEditor1"
                    style="height:300px;"
                    :options="editorOption"
                  ></quill-editor>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="选项">
                  <el-table :data="model.Items" style="width: 100%" border>
                    <el-table-column type="index" label="编号" width="50"></el-table-column>
                    <el-table-column prop="OptionName" label="选项名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="IsRight" align="center" label="是否答案" width="180">
                      <template slot-scope="scope">{{scope.row.IsRight?'是':'否'}}</template>
                    </el-table-column>
                    <el-table-column align="center" width="180">
                      <template slot="header" slot-scope="scope">
                        <el-button size="mini" type="primary" @click="addOption(model)">新增选项</el-button>
                      </template>
                      <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="editOption(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteOption(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="分数" prop="Grade">
                  <el-input-number
                    v-model="model.Grade"
                    :min="0"
                    :step="0.5"
                    label="分数"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="序号" prop="Sort">
                  <el-input-number
                    v-model="model.Sort"
                    :min="0"
                    :step="0.5"
                    label="序号"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="题目解析" prop="Analysis">
                  <quill-editor
                    v-model="model.Analysis"
                    ref="modelAnalysis14"
                    style="height:300px;"
                    :options="editorOption"
                  ></quill-editor>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 配伍选择题 -->
          <div v-if="model.QuestionTypeCode=='5'">
            <el-row>
              <el-col :span="24">
                <el-form-item label="选项">
                  <el-table :data="model.Items" style="width: 100%" border>
                    <el-table-column type="index" label="编号" width="50"></el-table-column>
                    <el-table-column prop="OptionName" label="选项名称" show-overflow-tooltip></el-table-column>
                    <!-- <el-table-column prop="IsRight" align="center" label="是否答案" width="180">
                      <template slot-scope="scope">{{scope.row.IsRight?'是':'否'}}</template>
                    </el-table-column>-->
                    <el-table-column align="center" width="180">
                      <template slot="header" slot-scope="scope">
                        <el-button size="mini" type="primary" @click="addOption(model)">新增选项</el-button>
                      </template>
                      <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="editOption(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteOption(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="题目">
                  <el-table :data="model.QueItems" style="width: 100%" border>
                    <el-table-column type="index" label="编号" width="50"></el-table-column>
                    <el-table-column prop="Name" label="题目名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="Analysis" label="题目解析" show-overflow-tooltip>
                      <template slot-scope="scope">{{scope.row.Analysis}}</template>
                    </el-table-column>
                    <el-table-column align="center" width="180">
                      <template slot="header">
                        <el-button size="mini" type="primary" @click="addPWQue(model)">新增</el-button>
                      </template>
                      <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="editPWQue(scope.row,model)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deletePWQue(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="序号" prop="Sort">
                  <el-input-number
                    v-model="model.Sort"
                    :min="0"
                    :step="0.5"
                    label="序号"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 案例分析选择题 、 综合分析选择题 、案例分析简单题 、 主观题 -->
          <div
            v-if="model.QuestionTypeCode=='6'||model.QuestionTypeCode=='7' || model.QuestionTypeCode=='8'||model.QuestionTypeCode=='9'"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="共用题干" prop="MainName">
                  <quill-editor
                    v-model="model.MainName"
                    style="height:300px;"
                    ref="modelMainName1"
                    :options="editorOption"
                  ></quill-editor>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="题目">
                  <el-table :data="model.QueItems" style="width: 100%" border>
                    <el-table-column type="index" label="编号" width="50"></el-table-column>
                    <el-table-column prop="Name" label="题目名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="Analysis" label="题目解析" show-overflow-tooltip>
                      <template slot-scope="scope">{{scope.row.Analysis}}</template>
                    </el-table-column>
                    <el-table-column align="center" width="180">
                      <template slot="header">
                        <el-button size="mini" type="primary" @click="addQue(model)">新增</el-button>
                      </template>
                      <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="editQue(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteQue(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="序号" prop="Sort">
                  <el-input-number
                    v-model="model.Sort"
                    :min="0"
                    :step="0.5"
                    label="序号"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div style="text-align:right;margin-top:60px;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmModel">提交</el-button>
      </div>
    </el-dialog>

    <!-- 添加配伍选择题子题目 -->
    <el-dialog
      :visible.sync="subPWDialogVisible"
      :title="subPWType==='edit'?'编辑子题目':'新增子题目'"
      width="60%"
      top="6vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="height:600px;overflow-y:auto;">
        <el-form
          :model="subPWModel"
          ref="subPWModel"
          :rules="subPWRules"
          label-width="120px"
          label-position="right"
          style="width: 90%;"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="题目" prop="Name">
                <quill-editor
                  v-model="subPWModel.Name"
                  ref="subPWModelName"
                  style="height:300px;"
                  :options="editorOption"
                ></quill-editor>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="选项">
                <el-table :data="subPWModel.Items" style="width: 100%" border>
                  <el-table-column type="index" width="50"></el-table-column>
                  <el-table-column prop="OptionName" label="选项名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="IsRight" align="center" label="是否答案" width="180">
                    <template slot-scope="scope">{{scope.row.IsRight?'是':'否'}}</template>
                  </el-table-column>
                  <el-table-column align="center" width="180">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="primary"
                        v-if="!scope.row.IsRight"
                        @click="setRight(scope.row,true)"
                      >设为正确答案</el-button>
                      <el-button
                        size="mini"
                        type="primary"
                        v-else
                        @click="setRight(scope.row,false)"
                      >取消正确答案</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="分数" prop="Grade">
                <el-input-number
                  v-model="subPWModel.Grade"
                  :min="0"
                  :step="0.5"
                  label="分数"
                  style="width: 100%"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="序号" prop="Sort">
                <el-input-number
                  v-model="subPWModel.Sort"
                  :min="0"
                  :step="0.5"
                  label="序号"
                  style="width: 100%"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="题目解析" prop="Analysis">
                <quill-editor
                  v-model="subPWModel.Analysis"
                  ref="myQuillEditor123"
                  style="height:300px;"
                  :options="editorOption"
                ></quill-editor>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="text-align:right;margin-top:20px;">
        <el-button type="danger" @click="subPWDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmPWQue">提交</el-button>
      </div>
    </el-dialog>

    <!-- 添加子题目 -->
    <el-dialog
      :visible.sync="subDialogVisible"
      :title="subType==='edit'?'编辑子题目':'新增子题目'"
      width="60%"
      top="6vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="height:600px;overflow-y:auto;">
        <el-form
          :model="subModel"
          ref="subModel"
          :rules="subRules"
          label-width="120px"
          label-position="right"
          style="width: 90%;"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="题目" prop="Name">
                <quill-editor
                  v-model="subModel.Name"
                  ref="subModelName"
                  style="height:300px;margin-bottom:100px;"
                  :options="editorOption"
                ></quill-editor>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="model.QuestionTypeCode=='8'||model.QuestionTypeCode=='9'">
            <el-col :span="24">
              <el-form-item label="答案" prop="Answer">
                <quill-editor
                  v-model="subModel.Answer"
                  ref="subModelAnswer"
                  style="height:300px;margin-bottom:100px;"
                  :options="editorOption"
                ></quill-editor>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="model.QuestionTypeCode=='6'||model.QuestionTypeCode=='7'">
            <el-col :span="24">
              <el-form-item label="选项">
                <el-table :data="subModel.Items" style="width: 100%" border>
                  <el-table-column type="index" width="50"></el-table-column>
                  <el-table-column prop="OptionName" label="选项名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="IsRight" align="center" label="是否答案" width="180">
                    <template slot-scope="scope">{{scope.row.IsRight?'是':'否'}}</template>
                  </el-table-column>
                  <el-table-column align="center" width="180">
                    <template slot="header" slot-scope="scope">
                      <el-button size="mini" type="primary" @click="addOption(subModel)">新增选项</el-button>
                    </template>
                    <template slot-scope="scope">
                      <el-button size="mini" type="primary" @click="editOption(scope.row)">编辑</el-button>
                      <el-button size="mini" type="danger" @click="deleteOption(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="分数" prop="Grade">
                <el-input-number
                  v-model="subModel.Grade"
                  :min="0"
                  :step="0.5"
                  label="分数"
                  style="width: 100%"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="序号" prop="Sort">
                <el-input-number
                  v-model="subModel.Sort"
                  :min="0"
                  :step="0.5"
                  label="序号"
                  style="width: 100%"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="题目解析" prop="Analysis">
                <quill-editor
                  v-model="subModel.Analysis"
                  ref="myQuillEditor"
                  style="height:300px;"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)"
                ></quill-editor>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="text-align:right;margin-top:20px;">
        <el-button type="danger" @click="subDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmQue">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="optionVisible"
      :title="optionType==='edit'?'编辑选项':'新增选项'"
      width="60%"
      top="12vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="optionModel"
        ref="optionModel"
        :rules="optionrules"
        label-width="120px"
        label-position="right"
        style="width: 90%;"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="选项" prop="OptionName">
              <quill-editor
                v-model="optionModel.OptionName"
                ref="optionModelOptionName"
                style="height:200px;margin-bottom:100px;"
                :options="editorOption"
              ></quill-editor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top:5px;">
          <el-col :span="12">
            <el-form-item label="序号" :step="0.5" prop="OptionSort">
              <el-input-number
                v-model="optionModel.OptionSort"
                :min="0"
                label="序号"
                style="width: 100%"
              ></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="model.QuestionTypeCode!='5'">
            <el-form-item label="是否为答案" prop="Answer">
              <el-radio-group v-model="optionModel.Answer">
                <el-radio
                  border
                  v-for="item in answers"
                  :label="item.value"
                  :key="item.value"
                >{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="optionVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmOption">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="uploadVisible"
      title="导入题目"
      :close-on-click-modal="false"
      @close="refresh"
      width="75%"
      top="6vh"
    >
      <template>
        <info-upload :dateText="randomNum" ref="upstu"></info-upload>
      </template>
    </el-dialog>
  </div>
</template>

<style>
.v-modal {
  z-index: 2000 !important;
}
</style>


<script src="@/js/tquestion/index.ts">
</script>
